<template>
  <Modal v-model="show" width="400" :footer-hide="true">
    <div class="account-panel" :class="{'third_open':third_show}">
      <transition-group name="slide-fade" mode="out-in">
        <form class="login-form" v-show="!third_show" key="l1">
          <h2 class="title">{{title}}</h2>
          <div class="input-field">
            <Input
              prefix="md-phone-portrait"
              placeholder="手机号码"
              size="large"
              type="tel"
              v-model="phoneno"
              @blur="check_this($event)"
            />
          </div>
          <div class="input-field">
            <Input
              prefix="md-expand"
              :placeholder="pwdtext"
              size="large"
              type="password"
              password
              v-model="pwd"
              @blur="check_this($event)"
            />
          </div>
          <template v-if="!bind_moblie_show">
            <div class="input-field" v-if="loginfailcount>3">
              <span class="icon iconfont icon-yanzhengma2"></span>
              <input
                type="text"
                name="txt_code"
                placeholder="验证码"
                v-model="code"
                maxlength="4"
                @blur="check_this($event)"
              />
              <img
                class="captchaimg"
                onclick="javascript:Login.reloadCaptchaImage()"
                :src="codeimg"
              />
            </div>
            <div class="btn-bar">
              <Button
                type="primary"
                long
                size="large"
                :disabled="disabled"
                :loading="btnloading"
                @click="login()"
              >登录</Button>
            </div>
            <div class="third-icons">
              <Icon
                type="ios-chatbubbles"
                size="20"
                color="#19be6b"
                title="微信登录"
                @click="wx_login()"
              />
            </div>
          </template>
          <template v-else>
            <!--绑定手机验证码-->
            <div class="input-field">
              <div class="codeinput">
                <Input
                  prefix="md-barcode"
                  placeholder="验证码"
                  v-model="mobile_vcode"
                  maxlength="6"
                  @blur="check_this($event)"
                />
                <Button type="default" @click="send_code()">{{send_btn_text}}</Button>
              </div>
            </div>
            <div class="btn-bar">
              <Button type="primary" :loading="btnloading" :disabled="disabled" @click="bind()">确定</Button>
            </div>
          </template>
          <div class="tiptext" :class="tiptext_css">{{showtext}}</div>
        </form>
        <div v-show="third_show" class="third_plan" key="l2">
          <div id="third_login_div">加载第三方登录..</div>
          <div class="backarrow" @click="ac_login">
            <Icon type="ios-arrow-dropleft" />
          </div>
        </div>
      </transition-group>
      <div class="third-bar" v-if="bind_moblie_show">
        <a class="skip-text" @click="skip_text()">下次再说</a>
      </div>
    </div>
  </Modal>
</template>

<script>
export default {
  name: 'Login',
  props: {
    loginModal: Boolean
  },
  data() {
    return {
      ruleForm: {
        phone: '18710721007',
        pass: 'suibo1007',
        remember: false,
      },
      rules: {
        phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            type: 'number',
            min: 11,
            message: '手机号码是11位数字',
            trigger: 'blur'
          }
        ],
        pass: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 8,
            max: 12,
            message: '长度在 8 到 12 个字符',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    closeLoginModal() {
      this.$emit('closeLoginModal', this.loginModal);
    },
  }
}
</script>